import * as THREE from '../../build/three.module.js';
import Stats from '../../jsm/libs/stats.module.js';

// 创建 stats 对象
let stats = new Stats();
document.body.appendChild(stats.dom);

/**
 * 创建场景对象 Scene
 */
let scene = new THREE.Scene();

/**
 * 创建网格模型
 */
// let gemoetry = new THREE.SphereGeometry(60, 40, 40); // 创建一个球形几何体
let gemoetry = new THREE.BoxGeometry(100, 100, 100); // 创建一个立方几何体
let material = new THREE.MeshLambertMaterial({
  color: 0x0000ff
}); // 兰伯特网格材质————非光泽表面材质，没有镜面高光，使用 Gouraud 着色模型
let mesh = new THREE.Mesh(gemoetry, material); // 几何体 + 材质 = 网格模型
scene.add(mesh); // 将网格模型添加到场景中

/**
 * 光源设置
 */
// 点光源
let point = new THREE.PointLight(0xffffff); // 创建点光源
point.position.set(400, 300, 200); // 点光源位置
scene.add(point); // 将点光源添加到场景中
// 环境光
let ambient = new THREE.AmbientLight(0x444444);
scene.add(ambient);

/**
 * 相机设置
 */
let width = window.innerWidth; // 窗口宽度
let height = window.innerHeight; // 窗口高度
let k = width / height; // 窗口宽高比
let s = 200; // 三维场景显示范围控制系数，系数越大，显示的范围越大
// 创建相机对象
let camera = new THREE.OrthographicCamera(-s * k, s * k, s, -s, 1, 1000);
camera.position.set(500, 300, 200); // 相机位置
camera.lookAt(scene.position); // 设置相机方向，指向场景对象

/**
 * 创建渲染器对象
 */
let renderer = new THREE.WebGLRenderer();
renderer.setSize(width, height); // 设置渲染区尺寸
renderer.setClearColor(0xb9d3ff, 1); // 设置背景颜色

/**
 * 插入canvas
 */
document.body.appendChild(renderer.domElement); // 向 body 中插入 canvas 元素

// 执行渲染操作
// renderer.render(scene, camera);

/**
 * 下面加入一个周期循环函数，来旋转网格模型对象
 */
// function render () {
//   renderer.render(scene, camera);
//   mesh.rotateY(.01); // 每次绕 Y 轴旋转 .01 个弧度
// }
// setInterval(render, 20); // 没20ms渲染一次，即 FPS=50(1s/20ms)

/**
 * 更加常用的循环动画是 requestAnimationFrame
 */
// 进一步提升旋转的流畅性
let T0 = new Date(); // 记录上一次旋转的时间戳
function render () {
  let T1 = new Date(); // 本次旋转的时间戳
  let t = T1 - T0; // 连续两次旋转间隔毫秒数
  T0 = T1; // 重新记录上一次旋转时间戳
  stats.update();
  requestAnimationFrame(render);
  renderer.render(scene, camera);
  mesh.rotateZ(-.001 * t); // 给定旋转角速度为 0.001 rad/ms <==> 1rad/s <==> 180度/s
  mesh.rotateY(-.001 * t);
  mesh.rotateX(-.001 * t);
}
render();